<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'

import EditPanel from './EditPanel.vue'

// 定义数据类型接口
interface EditPanelData {
  question: string
  questionSimilar: string[]
  answer: string
  category: string
  updateDate: string
  hitCount: number
  validPeriod: string
  validTimeDateRange: []
}

const data = reactive<EditPanelData>({
  question: '远程抄报注册文件提示已过期',
  questionSimilar: [
    '不能抄报税，提示服务已过期，是什么意思?',
    '远程报税过期怎么办?',
    '抄报系统远程升级,整整快一天了,一直显示更新中，请稍后，然后就死机',
    '没有远程申报选项了',
    '抄报系统远程升级,整整快一天了,一直显示更新中',
    '远程报税过期怎么办?',
  ],
  answer:
    '2018.5.1之前生效的一般纳税人，升级之后税率选择中依然有17%及11%的选项。对于5月1日之前发行的并生效的一般纳税人，开票软件升级之后，还可以使用17%和11%税率开具红字发票和蓝字发票。 对于5月1日之后生效的一般纳税人，无法使用17%和11%税率。2018.5.1之前发生纳税义务，开具的发票要求请咨询当地主管税务机关，咨询按照哪种税率开具。 如仍有疑问请登录【金税在线客服-转人工】或拨打95113-1。',
  category: '全部分类',
  updateDate: '2019-01-01 11:30',
  hitCount: 12,
  validPeriod: '永久有效',
  validTimeDateRange: [],
})

// 修改问答
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
  done()
}
</script>

<template>
  <div class="container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/knowledge/corpus' }">语料管理</el-breadcrumb-item>
      <el-breadcrumb-item>问答详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 标题 -->
    <div class="title">
      <h1>问题：{{ data.question }}</h1>
      <el-popover :width="400" placement="bottom">
        <template #reference>
          <el-button
            >其余问法<el-icon><ArrowDown /></el-icon
          ></el-button>
        </template>

        <ul class="list">
          <li v-for="(item, index) in data.questionSimilar" :key="index">
            <el-link href="https://element-plus.org" target="_blank">
              {{ item }}
            </el-link>
          </li>
        </ul>
      </el-popover>
    </div>

    <!-- 基本信息 -->
    <div class="info">
      <span class="item">分类：{{ data.category }}</span>
      <span class="item">更新日期：{{ data.updateDate }}</span>
      <span class="item">命中次数：{{ data.hitCount }}</span>
      <span class="item">有效时间：{{ data.validPeriod }}</span>
    </div>

    <!-- 正文 -->
    <div class="main">答案：{{ data.answer }}</div>

    <!-- 相似问题 -->
    <div class="similar">
      <p class="title">相似问题</p>
      <ul class="list">
        <li>
          <el-link href="https://element-plus.org" target="_blank">
            {{ data?.questionSimilar?.[0] ?? '其余问题' }}
          </el-link>
        </li>
      </ul>
    </div>

    <!-- 按钮 -->
    <div class="button-row">
      <el-button type="primary" plain @click="dialogVisible = true">修改</el-button>
      <el-button type="danger" plain>删除</el-button>
    </div>

    <!-- 对话框 修改问答 -->
    <el-dialog
      v-model="dialogVisible"
      title="修改问答"
      width="800"
      align-center
      :before-close="handleClose"
    >
      <edit-panel :data="data" />
      <template #footer>
        <div>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">导出</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
  padding: 20px;
}

.title {
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.title h1 {
  font-size: 1.25rem;
  margin-right: 40px;
}

.info {
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 20px;
}

.info .item {
  margin-right: 40px;
}

.main {
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.similar {
  margin-bottom: 30px;
}

.similar .title {
  font-size: 0.9rem;
  font-weight: 900;
  margin-bottom: 5px;
}

.list {
  padding-left: 30px;
  font-size: 0.85rem;
  color: #333;
}
</style>
